<!--管理员学生管理中课时管理页面-->
<template>
  <view class="container">
    <!-- 学生信息头部 -->
    <view class="student-header">
      <view class="student-info">
        <image class="student-avatar" :src="studentInfo.avatarUrl || '/static/default-avatar.png'"
               mode="aspectFill"></image>
        <view class="student-details">
          <text class="student-name">{{ studentInfo.studentName }}</text>
          <text class="student-phone">{{ studentInfo.parentPhone }}</text>
          <text class="student-id">ID: {{ studentInfo.id }}</text>
        </view>
      </view>
    </view>

    <!-- 课时概览卡片 -->
    <view class="hours-overview">
      <view class="overview-header">
        <text class="overview-title">课时概览</text>
        <text class="overview-subtitle">当前课时统计</text>
      </view>
      <view class="hours-stats">
        <view class="stat-item">
          <text class="stat-number">{{ lessonInfo.totalHours || 0 }}</text>
          <text class="stat-label">总课时</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ lessonInfo.usedHours || 0 }}</text>
          <text class="stat-label">已使用</text>
        </view>
        <view class="stat-item highlight">
          <text class="stat-number">{{ lessonInfo.remainingHours || 0 }}</text>
          <text class="stat-label">剩余课时</text>
        </view>
      </view>
    </view>

    <!-- 快捷操作 -->
    <view class="quick-actions">
      <view class="action-item" @click="showAdjustModal">
        <view class="action-icon">
          <text class="icon-text">⚙️</text>
        </view>
        <text class="action-text">课时调整</text>
      </view>
<!--      <view class="action-item" @click="showUseModal">
        <view class="action-icon">
          <text class="icon-text">📚</text>
        </view>
        <text class="action-text">使用课时</text>
      </view>-->
      <view class="action-item" @click="showHistory">
        <view class="action-icon">
          <text class="icon-text">📊</text>
        </view>
        <text class="action-text">变动记录</text>
      </view>
    </view>

    <!-- 最近记录 -->
    <view class="recent-records">
      <view class="section-header">
        <text class="section-title">最近变动</text>
        <text class="section-more" @click="showHistory">查看更多</text>
      </view>

      <view class="record-list">
        <view v-if="lessonLogs.length === 0" class="empty-records">
          <text class="empty-text">暂无课时记录</text>
        </view>
        <view class="record-item" v-for="item in lessonLogs.slice(0, 5)" :key="item.id">
          <view class="record-icon">
            <text class="icon-text" :class="item.typeClass">{{ getRecordIcon(item.type) }}</text>
          </view>
          <view class="record-info">
            <text class="record-title">{{ item.title }}</text>
            <text class="record-time">{{ formatTime(item.time) }}</text>
            <text v-if="item.description" class="record-desc">{{ item.description }}</text>
          </view>
          <view class="record-amount" :class="item.typeClass">
            <text class="amount-text">{{ item.changeValue > 0 ? '+' : '' }}{{ item.changeValue }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 课时调整弹窗 -->
    <view class="modal" v-if="showAdjustModalFlag" @click="closePickerOnOutside">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">课时调整</text>
          <text class="modal-close" @click="closeAdjustModal">×</text>
        </view>

        <view class="form">
          <view class="form-item">
            <text class="form-label">调整类型</text>
            <view class="custom-picker" @click.stop>
              <view class="picker-display" @click="togglePicker">
                <view class="picker-content">
                  <text class="picker-icon" :class="adjustForm.typeIndex === 0 ? 'increase-icon' : 'decrease-icon'">
                    {{ adjustForm.typeIndex === 0 ? '➕' : '➖' }}
                  </text>
                  <text class="picker-label">{{ adjustTypeOptions[adjustForm.typeIndex] }}</text>
                </view>
                <text class="picker-arrow" :class="{ 'rotated': showPicker }">▼</text>
              </view>

              <!-- 自定义下拉选项 -->
              <view class="picker-dropdown" v-if="showPicker" :class="{ 'show': showPicker }">
                <view
                    class="picker-option"
                    :class="{ 'active': adjustForm.typeIndex === 0 }"
                    @click="selectOption(0)"
                >
                  <text class="option-icon increase-icon">➕</text>
                  <text class="option-label">增加课时</text>
                  <text class="option-check" v-if="adjustForm.typeIndex === 0">✓</text>
                </view>
                <view
                    class="picker-option"
                    :class="{ 'active': adjustForm.typeIndex === 1 }"
                    @click="selectOption(1)"
                >
                  <text class="option-icon decrease-icon">➖</text>
                  <text class="option-label">减少课时</text>
                  <text class="option-check" v-if="adjustForm.typeIndex === 1">✓</text>
                </view>
              </view>
            </view>
          </view>
          <view class="form-item">
            <text class="form-label">调整课时</text>
            <input
                class="form-input"
                v-model="adjustForm.hours"
                placeholder="请输入调整课时数"
                type="number"
                @input="validateHours"
                :class="{ 'error': adjustForm.hoursError }"
            />
            <text v-if="adjustForm.hoursError" class="error-text">{{ adjustForm.hoursError }}</text>
          </view>
          <view class="form-item">
            <text class="form-label">调整说明</text>
            <textarea
                class="form-textarea"
                v-model="adjustForm.description"
                placeholder="请输入调整说明"
                @input="validateDescription"
                :class="{ 'error': adjustForm.descriptionError }"
            />
            <text v-if="adjustForm.descriptionError" class="error-text">{{ adjustForm.descriptionError }}</text>
          </view>

        </view>

        <view class="modal-actions">
          <button class="cancel-btn" @click="closeAdjustModal" :disabled="adjusting">取消</button>
          <button class="confirm-btn" @click="confirmAdjust" :disabled="isConfirmDisabled">
            <text v-if="adjusting" class="loading-text">调整中...</text>
            <text v-else>确认调整</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 课时使用弹窗 -->
    <view class="modal" v-if="showUseModalFlag">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">使用课时</text>
          <text class="modal-close" @click="closeUseModal">×</text>
        </view>

        <view class="form">
          <view class="form-item">
            <text class="form-label">使用课时</text>
            <input class="form-input" v-model="useForm.hours" placeholder="请输入使用课时数" type="number"/>
          </view>
          <view class="form-item">
            <text class="form-label">课程标题</text>
            <input class="form-input" v-model="useForm.title" placeholder="请输入课程标题"/>
          </view>
          <view class="form-item">
            <text class="form-label">课程描述</text>
            <textarea class="form-textarea" v-model="useForm.description" placeholder="请输入课程描述"/>
          </view>
        </view>

        <view class="modal-actions">
          <button class="cancel-btn" @click="closeUseModal">取消</button>
          <button class="confirm-btn" @click="confirmUse">确认使用</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getApiUrl, API_CONFIG, apiRequest} from '@/config/api.js'

export default {
  data() {
    return {
      studentInfo: {},
      lessonInfo: {
        studentId: null,
        totalHours: 0,
        usedHours: 0,
        remainingHours: 0
      /*  studentId: null,
        classId: 0,      // 这里要有班级ID
        changeValue: 0,
        reason: " " */     // 这里要有调整原因

      },
      lessonLogs: [],
      showAdjustModalFlag: false,
      showUseModalFlag: false,
      adjustForm: {
        typeIndex: 0,
        hours: '',
        description: '',
        hoursError: '',
        descriptionError: ''
      },
      useForm: {
        hours: '',
        title: '',
        description: ''
      },
      adjustTypeOptions: ['增加课时', '减少课时'],
      loading: false,
      adjusting: false,
      hoursValidationTimer: null, // 新增：用于存储课时验证的防抖定时器
      descriptionValidationTimer: null, // 新增：用于存储描述验证的防抖定时器
      showPicker: false // 新增：控制自定义下拉选项的显示
    }
  },
  onLoad(options) {
    if (options.id) {
      this.loadStudentData(options.id)
    }
  },

  onUnload() {
    // 页面销毁时清理定时器
    if (this.hoursValidationTimer) {
      clearTimeout(this.hoursValidationTimer)
      this.hoursValidationTimer = null
    }
    if (this.descriptionValidationTimer) {
      clearTimeout(this.descriptionValidationTimer)
      this.descriptionValidationTimer = null
    }
  },
  methods: {
    async loadStudentData(studentId) {
      console.log('开始加载学生课时数据，学生ID:', studentId)
      this.loading = true

      try {
        // 获取学生信息
        await this.loadStudentInfo(studentId)
        console.log('学生信息加载完成:', this.studentInfo)

        // 并行加载课时信息和记录
        await Promise.all([
          this.loadLessonInfo(studentId),
          this.loadLessonLogs(studentId)
        ])

        console.log('课时信息加载完成:', this.lessonInfo)
        console.log('课时记录加载完成:', this.lessonLogs)
        console.log('学生课时数据加载完成')
      } catch (error) {
        console.error('加载学生数据失败:', error)
        uni.showToast({
          title: '加载数据失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    async loadStudentInfo(studentId) {
      try {
        const token = uni.getStorageSync('token')

        // 从学生列表API获取学生信息
        const response = await apiRequest({
          url: getApiUrl(API_CONFIG.ENDPOINTS.LESSON_ADMIN_STUDENTS),
          method: 'GET',
          header: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          }
        })

        if (response.code === 200 && response.data) {
          // 在学生列表中查找对应学生
          const student = response.data.find(s => s.id == studentId)
          if (student) {
            this.studentInfo = student
          } else {
            // 如果没找到，设置默认信息
            this.studentInfo = {
              id: studentId,
              studentName: '未知学生',
              parentPhone: '未知',
              avatarUrl: '',
              className: '未知班级'
            }
          }
        } else {
          throw new Error(response.message || '获取学生信息失败')
        }
      } catch (error) {
        console.error('获取学生信息失败:', error)
        // 设置默认学生信息
        this.studentInfo = {
          id: studentId,
          studentName: '未知学生',
          parentPhone: '未知',
          avatarUrl: '',
          className: '未知班级'
        }
      }
    },

    async loadLessonInfo(studentId) {
      try {
        const token = uni.getStorageSync('token')

        const response = await apiRequest({
          url: getApiUrl(API_CONFIG.ENDPOINTS.LESSON_INFO),
          method: 'GET',
          header: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          data: {
            studentId: studentId
          }
        })

        if (response.code === 200) {
          this.lessonInfo = response.data || {
            studentId: studentId,
            totalHours: 0,
            usedHours: 0,
            remainingHours: 0
          }
        } else {
          throw new Error(response.message || '获取课时信息失败')
        }
      } catch (error) {
        console.error('获取课时信息失败:', error)
        // 设置默认数据
        this.lessonInfo = {
          studentId: studentId,
          totalHours: 0,
          usedHours: 0,
          remainingHours: 0
        }
      }
    },

    async loadLessonLogs(studentId) {
      try {
        const token = uni.getStorageSync('token')

        const response = await apiRequest({
          url: getApiUrl(API_CONFIG.ENDPOINTS.LESSON_LOGS),
          method: 'GET',
          header: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          data: {
            studentId: studentId
          }
        })

        if (response.code === 200) {
          // 为每条记录添加typeClass属性
          this.lessonLogs = (response.data || []).map(item => {
            return {
              ...item,
              typeClass: this.getRecordTypeClass(item.type)
            }
          })
        } else {
          throw new Error(response.message || '获取课时记录失败')
        }
      } catch (error) {
        console.error('获取课时记录失败:', error)
        this.lessonLogs = []
      }
    },

    showAdjustModal() {
      this.showAdjustModalFlag = true
      this.adjustForm = {
        typeIndex: 0,
        hours: '',
        description: '',
        hoursError: '',
        descriptionError: ''
      }
      this.showPicker = false // 关闭下拉选项
    },

    closeAdjustModal() {
      this.showAdjustModalFlag = false
      // 清理定时器
      if (this.hoursValidationTimer) {
        clearTimeout(this.hoursValidationTimer)
        this.hoursValidationTimer = null
      }
      if (this.descriptionValidationTimer) {
        clearTimeout(this.descriptionValidationTimer)
        this.descriptionValidationTimer = null
      }
      // 重置表单
      this.adjustForm = {
        typeIndex: 0,
        hours: '',
        description: '',
        hoursError: '',
        descriptionError: ''
      }
      this.showPicker = false // 关闭下拉选项
    },

    showUseModal() {
      this.showUseModalFlag = true
      this.useForm = {
        hours: '',
        title: '',
        description: ''
      }
    },

    closeUseModal() {
      this.showUseModalFlag = false
    },

    validateHours() {
      // 清除之前的定时器
      if (this.hoursValidationTimer) {
        clearTimeout(this.hoursValidationTimer)
      }

      // 设置防抖验证
      this.hoursValidationTimer = setTimeout(() => {
        const hours = this.adjustForm.hours
        if (!hours) {
          this.adjustForm.hoursError = '请输入调整课时数'
        } else if (parseInt(hours) <= 0) {
          this.adjustForm.hoursError = '课时数必须大于0'
        } else if (parseInt(hours) > 999) {
          this.adjustForm.hoursError = '课时数不能超过999'
        } else if (this.adjustForm.typeIndex === 1 && parseInt(hours) > this.lessonInfo.remainingHours) {
          this.adjustForm.hoursError = `减少课时不能超过当前剩余课时(${this.lessonInfo.remainingHours})`
        } else {
          this.adjustForm.hoursError = ''
        }
      }, 300) // 300ms防抖
    },

    validateDescription() {
      // 清除之前的定时器
      if (this.descriptionValidationTimer) {
        clearTimeout(this.descriptionValidationTimer)
      }

      // 设置防抖验证
      this.descriptionValidationTimer = setTimeout(() => {
        const description = this.adjustForm.description.trim()
        if (!description) {
          this.adjustForm.descriptionError = '请输入调整说明'
        } else if (description.length < 2) {
          this.adjustForm.descriptionError = '调整说明至少2个字符'
        } else if (description.length > 100) {
          this.adjustForm.descriptionError = '调整说明不能超过100个字符'
        } else {
          this.adjustForm.descriptionError = ''
        }
      }, 300) // 300ms防抖
    },

    isFormValid() {
      // 直接检查状态，不调用验证方法
      const hasHours = this.adjustForm.hours && parseInt(this.adjustForm.hours) > 0
      const hasDescription = this.adjustForm.description && this.adjustForm.description.trim().length >= 2
      const noHoursError = !this.adjustForm.hoursError
      const noDescriptionError = !this.adjustForm.descriptionError

      return hasHours && hasDescription && noHoursError && noDescriptionError
    },

    validateForm() {
      // 手动触发验证
      this.validateHours()
      this.validateDescription()
      return this.isFormValid()
    },

    getPreviewHours() {
      const hours = parseInt(this.adjustForm.hours)
      const currentRemaining = this.lessonInfo.remainingHours
      const changeValue = this.adjustForm.typeIndex === 0 ? hours : -hours
      const result = currentRemaining + changeValue
      return Math.max(0, result) // 确保不会出现负数
    },

    togglePicker() {
      this.showPicker = !this.showPicker
    },

    selectOption(index) {
      this.adjustForm.typeIndex = index
      this.showPicker = false
      // 当切换类型时重新验证课时数
      if (this.adjustForm.hours) {
        this.validateHours()
      }
    },

    async confirmAdjust() {
      if (!this.validateForm()) {
        uni.showToast({
          title: '请检查输入信息',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: '调整中...'
      })
      this.adjusting = true

      try {
        const token = uni.getStorageSync('token')
        const hours = parseInt(this.adjustForm.hours)
        // 根据选择类型决定正负值
        const changeValue = this.adjustForm.typeIndex === 0 ? hours : -hours

        const response = await apiRequest({
          url: getApiUrl(API_CONFIG.ENDPOINTS.LESSON_ADJUST),
          method: 'POST',
          header: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          data: {
            studentId: this.studentInfo.id,
            changeValue: changeValue,
            description: this.adjustForm.description
          }
        })

        if (response.code === 200) {
          uni.showToast({
            title: '调整成功',
            icon: 'success'
          })

          // 重新加载数据
          await this.loadStudentData(this.studentInfo.id)
          this.closeAdjustModal()
        } else {
          uni.showToast({
            title: response.message || '调整失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('调整失败:', error)
        uni.showToast({
          title: '调整失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
        this.adjusting = false
      }
    },

    async confirmUse() {
      if (!this.useForm.hours || parseInt(this.useForm.hours) <= 0) {
        uni.showToast({
          title: '请输入有效的使用课时数',
          icon: 'none'
        })
        return
      }

      if (!this.useForm.title.trim()) {
        uni.showToast({
          title: '请输入课程标题',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: '使用中...'
      })

      try {
        const token = uni.getStorageSync('token')

        const response = await apiRequest({
          url: getApiUrl(API_CONFIG.ENDPOINTS.LESSON_USE),
          method: 'POST',
          header: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          data: {
            studentId: this.studentInfo.id,
            hours: parseInt(this.useForm.hours),
            title: this.useForm.title,
            description: this.useForm.description || ''
          }
        })

        if (response.code === 200) {
          uni.showToast({
            title: '使用成功',
            icon: 'success'
          })

          // 重新加载数据
          await this.loadStudentData(this.studentInfo.id)
          this.closeUseModal()
        } else {
          uni.showToast({
            title: response.message || '使用失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('使用失败:', error)
        uni.showToast({
          title: '使用失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    showHistory() {
      uni.navigateTo({
        url: `/pages/admin/student-history?studentId=${this.studentInfo.id}&studentName=${this.studentInfo.studentName}`
      })
    },

    getRecordIcon(type) {
      const iconMap = {
        'CLASS': '📚',
        'RECHARGE': '💰',
        'ADJUSTMENT': '⚙️',
        'USE': '📖'
      }
      return iconMap[type] || '📝'
    },

    getRecordTypeClass(type) {
      const classMap = {
        'CLASS': 'use',
        'RECHARGE': 'recharge',
        'ADJUSTMENT': 'adjust',
        'USE': 'use'
      }
      return classMap[type] || 'default'
    },

    formatTime(timeStr) {
      if (!timeStr) return ''

      const date = new Date(timeStr)
      const now = new Date()
      const diffTime = now - date
      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))

      if (diffDays === 0) {
        return date.toLocaleTimeString('zh-CN', {
          hour: '2-digit',
          minute: '2-digit'
        })
      } else if (diffDays === 1) {
        return '昨天 ' + date.toLocaleTimeString('zh-CN', {
          hour: '2-digit',
          minute: '2-digit'
        })
      } else if (diffDays < 7) {
        return `${diffDays}天前`
      } else {
        return date.toLocaleDateString('zh-CN', {
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        })
      }
    },

    closePickerOnOutside(event) {
      // 如果下拉框是打开的，则关闭它
      if (this.showPicker) {
        this.showPicker = false
      }
    },

    closePicker() {
      this.showPicker = false
    }
  },
  computed: {
    isConfirmDisabled() {
      return this.adjusting || !this.isFormValid()
    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #0B0F1A 0%, #1a1f2e 100%);
  padding-bottom: 40rpx;
}

.student-header {
  margin: 20rpx;
  padding: 30rpx;
  background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.3);

  .student-info {
    display: flex;
    align-items: center;

    .student-avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 30rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
    }

    .student-details {
      flex: 1;

      .student-name {
        display: block;
        font-size: 36rpx;
        color: #FFFFFF;
        font-weight: bold;
        margin-bottom: 8rpx;
      }

      .student-phone {
        display: block;
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 4rpx;
      }

      .student-id {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.6);
      }
    }
  }
}

.hours-overview {
  margin: 20rpx;
  padding: 40rpx;
  background: #1a1f2e;
  border-radius: 20rpx;
  border: 1rpx solid #2a2f3e;

  .overview-header {
    text-align: center;
    margin-bottom: 40rpx;

    .overview-title {
      display: block;
      font-size: 32rpx;
      color: #FFFFFF;
      font-weight: bold;
      margin-bottom: 8rpx;
    }

    .overview-subtitle {
      font-size: 24rpx;
      color: #AAB4BE;
    }
  }

  .hours-stats {
    display: flex;
    justify-content: space-around;

    .stat-item {
      text-align: center;

      &.highlight {
        .stat-number {
          color: #00B8D4;
        }
      }

      .stat-number {
        display: block;
        font-size: 48rpx;
        color: #FFFFFF;
        font-weight: bold;
        margin-bottom: 8rpx;
      }

      .stat-label {
        font-size: 24rpx;
        color: #AAB4BE;
      }
    }
  }
}

.quick-actions {
  margin: 20rpx;
  display: flex;
  gap: 20rpx;

  .action-item {
    flex: 1;
    background: #1a1f2e;
    border-radius: 16rpx;
    padding: 30rpx 20rpx;
    text-align: center;
    border: 1rpx solid #2a2f3e;

    .action-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16rpx;

      .icon-text {
        font-size: 28rpx;
      }
    }

    .action-text {
      font-size: 26rpx;
      color: #FFFFFF;
    }
  }
}

.recent-records {
  margin: 20rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 32rpx;
      color: #FFFFFF;
      font-weight: bold;
    }

    .section-more {
      font-size: 24rpx;
      color: #00B8D4;
    }
  }
}

.record-list {
  .empty-records {
    background: #1a1f2e;
    border-radius: 16rpx;
    padding: 60rpx 30rpx;
    text-align: center;
    border: 1rpx solid #2a2f3e;

    .empty-text {
      font-size: 28rpx;
      color: #AAB4BE;
    }
  }

  .record-item {
    background: #1a1f2e;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    border: 1rpx solid #2a2f3e;

    .record-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background: #2a2f3e;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;

      .icon-text {
        font-size: 28rpx;

        &.use {
          color: #f44336;
        }

        &.recharge {
          color: #4cd964;
        }

        &.adjust {
          color: #ff9800;
        }

        &.default {
          color: #AAB4BE;
        }
      }
    }

    .record-info {
      flex: 1;

      .record-title {
        display: block;
        font-size: 28rpx;
        color: #FFFFFF;
        margin-bottom: 8rpx;
      }

      .record-time {
        display: block;
        font-size: 24rpx;
        color: #AAB4BE;
        margin-bottom: 4rpx;
      }

      .record-desc {
        font-size: 22rpx;
        color: rgba(170, 180, 190, 0.8);
      }
    }

    .record-amount {
      .amount-text {
        font-size: 32rpx;
        font-weight: bold;

        &.use {
          color: #f44336;
        }

        &.recharge {
          color: #4cd964;
        }

        &.adjust {
          color: #ff9800;
        }

        &.default {
          color: #AAB4BE;
        }
      }
    }
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;

  .modal-content {
    background: #1a1f2e;
    border-radius: 20rpx;
    width: 80%;
    max-width: 600rpx;

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #2a2f3e;

      .modal-title {
        font-size: 32rpx;
        color: #FFFFFF;
        font-weight: bold;
      }

      .modal-close {
        font-size: 40rpx;
        color: #AAB4BE;
        line-height: 1;
      }
    }

    .form {
      padding: 30rpx;

      .form-item {
        margin-bottom: 30rpx;

        .form-label {
          display: block;
          font-size: 28rpx;
          color: #FFFFFF;
          margin-bottom: 16rpx;
          font-weight: 500;
        }

        .error-text {
          display: block;
          font-size: 24rpx;
          color: #f44336;
          margin-top: 8rpx;
          animation: fadeIn 0.3s ease;
        }

        .form-input {
          width: 100%;
          height: 88rpx;
          background: linear-gradient(135deg, #2a2f3e 0%, #3a3f4e 100%);
          border-radius: 16rpx;
          padding: 0 24rpx;
          font-size: 28rpx;
          color: #FFFFFF;
          border: 2rpx solid #3a3f4e;
          transition: all 0.3s ease;
          box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);

          &:focus {
            border-color: #00B8D4;
            box-shadow: 0 0 0 4rpx rgba(0, 184, 212, 0.2), inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
          }

          &::placeholder {
            color: rgba(170, 180, 190, 0.6);
          }

          &.error {
            border-color: #f44336;
            box-shadow: 0 0 0 4rpx rgba(244, 67, 54, 0.2), inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
          }
        }

        .form-textarea {
          width: 100%;
          height: 140rpx;
          background: linear-gradient(135deg, #2a2f3e 0%, #3a3f4e 100%);
          border-radius: 16rpx;
          padding: 24rpx;
          font-size: 28rpx;
          color: #FFFFFF;
          border: 2rpx solid #3a3f4e;
          transition: all 0.3s ease;
          box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
          resize: none;

          &:focus {
            border-color: #00B8D4;
            box-shadow: 0 0 0 4rpx rgba(0, 184, 212, 0.2), inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
          }

          &::placeholder {
            color: rgba(170, 180, 190, 0.6);
          }

          &.error {
            border-color: #f44336;
            box-shadow: 0 0 0 4rpx rgba(244, 67, 54, 0.2), inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
          }
        }

        .custom-picker {
          position: relative;
          width: 100%;
          height: 88rpx;
          background: linear-gradient(135deg, #2a2f3e 0%, #3a3f4e 100%);
          border-radius: 16rpx;
          padding: 0 24rpx;
          border: 2rpx solid #3a3f4e;
          display: flex;
          align-items: center;
          justify-content: space-between;
          transition: all 0.3s ease;
          box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
          cursor: pointer;
          z-index: 10; /* Ensure it's above other elements */

          &:hover {
            border-color: #00B8D4;
            box-shadow: 0 0 0 2rpx rgba(0, 184, 212, 0.1), inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
          }

          &:active {
            border-color: #00B8D4;
            box-shadow: 0 0 0 4rpx rgba(0, 184, 212, 0.2), inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
            transform: scale(0.98);
          }

          .picker-display {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;

            .picker-content {
              display: flex;
              align-items: center;
              flex: 1;

              .picker-icon {
                font-size: 24rpx;
                margin-right: 16rpx;
                width: 36rpx;
                height: 36rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8rpx;
                transition: all 0.3s ease;
                font-weight: bold;

                &.increase-icon {
                  color: #4cd964;
                  background: rgba(76, 217, 100, 0.15);
                  border: 1rpx solid rgba(76, 217, 100, 0.4);
                  box-shadow: 0 2rpx 8rpx rgba(76, 217, 100, 0.2);
                }

                &.decrease-icon {
                  color: #f44336;
                  background: rgba(244, 67, 54, 0.15);
                  border: 1rpx solid rgba(244, 67, 54, 0.4);
                  box-shadow: 0 2rpx 8rpx rgba(244, 67, 54, 0.2);
                }
              }

              .picker-label {
                font-size: 28rpx;
                color: #FFFFFF;
                font-weight: 500;
                transition: color 0.3s ease;
              }
            }

            .picker-arrow {
              font-size: 20rpx;
              color: #AAB4BE;
              transition: transform 0.3s ease;
              transform: rotate(0deg);
            }

            &.rotated .picker-arrow {
              transform: rotate(180deg);
            }
          }

          .picker-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #1a1f2e;
            border-radius: 16rpx;
            border: 2rpx solid #3a3f4e;
            box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.4);
            z-index: 1000;
            overflow: hidden;
            margin-top: 8rpx;
            animation: dropdownSlideIn 0.3s ease;

            .picker-option {
              display: flex;
              align-items: center;
              padding: 24rpx;
              cursor: pointer;
              transition: all 0.2s ease;
              border-bottom: 1rpx solid #2a2f3e;
              background: #1a1f2e;

              &:last-child {
                border-bottom: none;
              }

              &:hover {
                background: #2a2f3e;
              }

              &.active {
                background: rgba(0, 184, 212, 0.1);
                border-left: 4rpx solid #00B8D4;
              }

              .option-icon {
                font-size: 24rpx;
                margin-right: 16rpx;
                width: 36rpx;
                height: 36rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8rpx;
                transition: all 0.3s ease;
                font-weight: bold;

                &.increase-icon {
                  color: #4cd964;
                  background: rgba(76, 217, 100, 0.15);
                  border: 1rpx solid rgba(76, 217, 100, 0.4);
                  box-shadow: 0 2rpx 8rpx rgba(76, 217, 100, 0.2);
                }

                &.decrease-icon {
                  color: #f44336;
                  background: rgba(244, 67, 54, 0.15);
                  border: 1rpx solid rgba(244, 67, 54, 0.4);
                  box-shadow: 0 2rpx 8rpx rgba(244, 67, 54, 0.2);
                }
              }

              .option-label {
                font-size: 28rpx;
                color: #FFFFFF;
                flex: 1;
                font-weight: 500;
              }

              .option-check {
                font-size: 24rpx;
                color: #00B8D4;
                margin-left: 16rpx;
                font-weight: bold;
              }
            }
          }
        }

        .preview-section {
          margin-top: 30rpx;
          padding: 20rpx 24rpx;
          background: #2a2f3e;
          border-radius: 16rpx;
          border: 1rpx solid #3a3f4e;
          animation: slideIn 0.3s ease;

          .preview-title {
            font-size: 28rpx;
            color: #FFFFFF;
            margin-bottom: 16rpx;
            font-weight: bold;
          }

          .preview-content {
            .preview-text {
              font-size: 26rpx;
              color: #AAB4BE;
              margin-bottom: 8rpx;
            }

            .preview-change {
              display: flex;
              align-items: center;
              font-size: 28rpx;
              font-weight: bold;
              margin-top: 12rpx;
              padding: 12rpx 16rpx;
              border-radius: 12rpx;
              transition: all 0.3s ease;

              .change-icon {
                font-size: 24rpx;
                margin-right: 12rpx;
                width: 28rpx;
                height: 28rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
              }

              .change-text {
                font-size: 28rpx;
                font-weight: bold;
              }

              &.increase {
                color: #4cd964;
                background: rgba(76, 217, 100, 0.1);
                border: 1rpx solid rgba(76, 217, 100, 0.2);

                .change-icon {
                  background: rgba(76, 217, 100, 0.2);
                  color: #4cd964;
                }
              }

              &.decrease {
                color: #f44336;
                background: rgba(244, 67, 54, 0.1);
                border: 1rpx solid rgba(244, 67, 54, 0.2);

                .change-icon {
                  background: rgba(244, 67, 54, 0.2);
                  color: #f44336;
                }
              }
            }
          }
        }
      }
    }

    .modal-actions {
      display: flex;
      gap: 20rpx;
      padding: 30rpx;
      border-top: 1rpx solid #2a2f3e;

      .cancel-btn, .confirm-btn {
        flex: 1;
        height: 80rpx;
        border-radius: 40rpx;
        font-size: 28rpx;
        border: none;
        transition: all 0.3s ease;
      }

      .cancel-btn {
        background: #2a2f3e;
        color: #AAB4BE;

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }

      .confirm-btn {
        background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
        color: #FFFFFF;

        &:disabled {
          background: #2a2f3e;
          color: #AAB4BE;
          cursor: not-allowed;
        }
      }

      .loading-text {
        color: #FFFFFF;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
